<template>
	<view class="main">
		<view class="main-head">
			<view class="fixedTop">
				<u-status-bar></u-status-bar>
				<view class="title-box">
					<text class="title-txt">请吃饭-易迹外卖助手</text>
					<!-- <image class="share" :style="{marginRight:`${barWidth}px`}" src="../../static/share.png" mode="aspectFit"></image> -->
				</view>
				<view class="location" @click="chooseMap">
					<u-icon name="map-fill" color="#cccccc" size="14"></u-icon>
					<text class="location-name">{{location||"暂未选择地区"}}</text>
					<u-icon name="arrow-down" color="#cccccc" size="10"></u-icon>
				</view>
				<view class="search-box">
					<u-search placeholder="寻好店,享好餐" v-model="keyword" :showAction="false" @search="searchInfo"></u-search>
					<view class="kefu-box" @click="showKefu">
						<image class="kefu-img" src="../../static/kefu.png" mode="aspectFit"></image>
						<text class="kefu-title">客服</text>
					</view>
				</view>
			</view>
			<view class="banner-box">
				<u-swiper :list="bannerList" keyName="image" @click="clickBanner" height="150" radius="8"
					imgMode='scaleToFill'></u-swiper>
			</view>
			<view class="muen-box">
				<view class="navslider-box" v-if="navbarShowList.length > 0">
					<swiper class="swiper-type swiper-nav" :indicator-dots="navbarList.length > 10 ? true : false"
						indicator-color="#eaeaea" indicator-active-color="#FE3A33" :duration="500" :style="sliderH">
						<swiper-item v-for="(sliderItem, index) in navbarShowList" :key="index">
							<view class="slider_itemslist rowSta">
								<view class="item colCen" v-for="(item, idx) in sliderItem" :key="idx"
									@click="goUrl(item)">
									<image :src="item.image" :lazy-load="true" mode="aspectFit"></image>
									<view class="desc">{{ item.name }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="list-box">
			<u-tabs :list="list4" lineWidth="50" lineColor="#FEBD38" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.25)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="changePlatform">
			</u-tabs>
			<view class="type-box">
				<view class='type-item'>
					<view class="item-t" :class="sortType == item.type ?'itemCkeck' :''" v-for="(item,index) in sortArr"
						:key="index" @click="changeSort(item)">{{item.name}}</view>
				</view>
				<!-- <view class="switch-box">
					<u-switch v-model="showHave" @change="changeType" size="16" activeColor="#FE7C0A"></u-switch>
					<text class="switch-title">只看可抢</text>
				</view> -->
			</view>
			<view class="shop-box loading" v-if="showJz">
				<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
			</view>
			<view class="shop-box" v-else>
				<view v-if="shopList.length > 0">
					<view class="shop-item" v-for="(item,index) in shopList" :key="index">
						<view class="shop-info">
							<image class="shop-img" :src="item.logo"></image>
							<view class="info-box">
								<text class="shop-name">{{item.name}}</text>
								<view class="shop-center">
									<view class="shop-platform">
										<image class="platform-img" :src="item.platformLogo"></image>
										<text class="platform-title">{{item.platformName}}</text>
									</view>
									<text class="juli">{{item.distance}}</text>
								</view>

								<view class="buy-now">
									<text class="activity-tip">共{{item.planList.length}}个活动</text>
									<!-- <view class="buy-btn" @click="goPlace">去抢单</view> -->
								</view>
							</view>
						</view>
						<view class="activity-box">
							<view class="activity-item" v-for="(it,idx) in item.planList" :key="idx">
								<view class="item-line">
									<view class="item-line-title">活动{{idx+1}}</view>
									<view class="line-box"></view>
								</view>
								<view class="item-content">
									<view class="content-left">
										<image class="shijian" src="../../static/shijian.png"></image>
										<text class="activity-time">10:00-23:00</text>
										<view class="actttxt">
											<view class="manjian rowCenCen">
												{{it.commission_rate_text}}
											</view>
										</view>
										<!-- 需要评价 -->
										<view class="actttxt" v-if="it.planType">
											<view class="rowCenCen dapaizx"
												:class="it.planType == 1?'dapaizx':'wuxupj'">
												{{it.planTypeCh}}
											</view>
										</view>

									</view>
									<view class="content-right">
										<view class="kucun">
											<text class="kucun-title">还剩 <text
													style="color: #FFBA00;">{{it.restStock}}</text> 份</text>
											<u-line-progress :percentage="it.percentage" activeColor="#FFBA00"
												height="5" :showText="false"></u-line-progress>
										</view>
									</view>
									<view class="buy-btn" @click="goDetail(item,it)" v-if="it.restStock > 0">抢单</view>
									<view class="rowCenCen orgbtn greybtn" v-else>
										售空
									</view>
								</view>
							</view>

						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</view>

				<view v-else>
					<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png" text="该地区暂无优惠"
						iconColor="#D4D4D4">
					</u-empty>
				</view>

			</view>
		</view>
		<kefuModal ref="kefuModal"></kefuModal>
		<communityModal ref="communityModal"></communityModal>
		<!-- <view class="game" @tap="gameProgram">
			<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/bwc/game1.png" mode="aspectFit"></image>
		</view> -->
	</view>
</template>
<script>
	import {
		doGetLocation
	} from '@/utils/getLocation.js';
	import * as SettingApi from '@/api/setting'
	import * as BannerApi from '@/api/banner'
	import * as MenuApi from '@/api/menu'
	import * as BwcApi from '@/api/bwc'
	import * as UserApi from '@/api/user'
	import storage from '../../utils/storage';
	import utils from '../../utils/util.js';
	import store from '@/store'
	import kefuModal from "@/components/kefuModal.vue"
	import communityModal from "@/components/communityModal.vue"
	import request from '@/utils/request'
	export default {
		components: {
			kefuModal,
			communityModal
		},
		data() {
			return {
				showJz: true,
				page: '',
				// 胶囊的宽度
				barWidth: 0,
				showHave: false,
				location: '',
				keyword: '',
				bannerList: [],
				navbarList: [],
				navbarShowList: [],
				sliderH: '',
				list4: [{
					name: '全城霸王餐',
					platform: ''
				}, {
					name: '美团专版',
					platform: '1'
				}, {
					name: '饿了么专版',
					platform: '2'
				}],
				platformValue: '',
				sortType: 1,
				sortArr: [{
						'type': 0,
						'name': '默认排序'
					},
					{
						'type': 1,
						'name': '距离最近'
					},
					{
						'type': 2,
						'name': '无需评价'
					}
				],
				shopList: [],
				loadStatus: 'loadmore'
			}
		},

		watch: {
			navbarList(nval, oval) {
				let index = 0;
				while (index < nval.length) {
					this.navbarShowList.push(nval.slice(index, (index += 10)));
				}
				if (this.navbarList.length > 5) {
					this.sliderH = 'height:390rpx;';
				} else {
					this.sliderH = 'height:180rpx;';
				}
			}
		},
		onLoad(e) {
			console.log("小游戏参数", e);
			if (e.openid) {
				storage.set('game_openid', e.openid);
				if (storage.get("token") && storage.get("userInfo")) {
					this.bindGame()
				}
			}
			//this.createShare()
			this.getBannerList();
			this.getMenuList()
			// #ifdef MP-WEIXIN
			let btnInfo = uni.getMenuButtonBoundingClientRect(); // 按钮信息
			this.barWidth = btnInfo.width + 10
			doGetLocation((data) => {
				this.getMerchantList(data.latitude, data.longitude);
				this.getLocationInfo(data)
			})
			// #endif
			// #ifdef H5
			if (this.$wechat.isWechat()) {
				if (this.$wechat) {
					let config = storage.get('baseInfo');
					if (config.login.isWxOfficialAuth == 1) {
						this.$wechat.location((res) => {
							//苹果手机返回经纬度为数字，安卓手机为字符串
							console.log('微信返回地理信息', res)
							let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							this.getLocationInfo(res)
							this.resetData()
						})
					} else {
						uni.getLocation({
							type: 'gcj02', //返回可以用于uni.openLocation的经纬度
							success: (res) => {
								console.log(res)
								const longs = res.longitude.toString();
								const lat = res.latitude.toString();
								if (longs !== '' && lat !== '') {
									this.getLocationInfo({
										latitude: lat,
										longitude: longs
									})
									this.resetData()
								}
							}
						});
					}

				}
			} else {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						console.log(res)
						const longs = res.longitude.toString();
						const lat = res.latitude.toString();
						if (longs !== '' && lat !== '') {
							this.getLocationInfo({
								latitude: lat,
								longitude: longs
							})
							this.resetData()
						}
					}
				});
			}
			// #endif
		},
		onReachBottom() {
			if (this.loadStatus == "loadmore") {
				this.getMerchantList()
			}
		},
		methods: {
			// 绑定霸王餐和游戏
			async bindGame() {
				let res = await request.get("login/bindGame", {
					bwc_openid: storage.get("userInfo").auth.openid,  //霸王餐的openid
					game_openid: storage.get('game_openid'), //游戏的openid
				})
				console.log("绑定结果",res);
			},
			// 跳转小游戏
			async gameProgram() {
				if (storage.get("token")) {
					uni.showLoading()
					if (!storage.get("userInfo")) {
						let res = await UserApi.getUserInfo()
						if (res.code == 1) {
							storage.set('userInfo', res.data);
						}
					}
					uni.navigateToMiniProgram({
						appId: "wxf29d7a2b65ab5fe0",
						path: "",
						extraData: {
							'openid': storage.get("userInfo").auth.openid
						},
						envVersion: 'trial',
						success(res) {
							uni.hideLoading()
						},
						fail(err) {
							uni.hideLoading()
						}
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '此时此刻需要您登录喔~',
						// showCancel: false,
						confirmText: "去登录",
						cancelText: "再逛会",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								})
							}
						},
					})
				}
			},
			createShare() {
				// #ifdef MP-WEIXIN
				let baseConfig = uni.getStorageSync('baseInfo');
				console.log(baseConfig);
				if (baseConfig.wxShare.share_bg_title != "") uni.$u.mpShare.title = baseConfig.wxShare.share_bg_title;
				if (baseConfig.wxShare.share_bg_img != "") uni.$u.mpShare.imageUrl = baseConfig.wxShare.share_bg_img;

				// #endif
			},
			changePlatform(item) {
				this.platformValue = item.platform
				this.shopList = [];
				this.page = 1;
				this.loadStatus = 'loadmore';
				this.showJz = true;
				this.getMerchantList();
			},
			showKefu() {
				this.$refs.kefuModal.show()
			},
			goPlace() {
				return this.$toast("您需要先选择一个活动");
			},
			goDetail(allobj, actobj) {
				let userId = store.getters.userId;
				if (userId == '') {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				var location = storage.get("location");
				let obj = {
					actobj: actobj,
					lon: String(location.lng),
					lat: String(location.lat),
					...allobj
				}
				uni.setStorageSync('bwc', obj)
				uni.navigateTo({
					url: "/pages/index/detail"
				})
			},
			searchInfo() {
				this.resetData();
			},
			getMerchantList(lat = "", lng = "") {
				if (this.loadStatus == "loadmore") this.loadStatus = 'loading';
				var location = storage.get("location");
				let param = {
					lat: lat != "" ? lat : location.lat,
					lng: lng != "" ? lng : location.lng,
					page: this.page,
					platform: this.platformValue,
					sortType: this.sortType,
					searchWord: this.keyword
				};
				BwcApi.getMerchantList(param).then((res) => {
					this.showJz = false;
					if (res.code == 1) {
						if (res.data.list.length > 0) {
							this.shopList = this.shopList.concat(res.data.list);
							this.page++;
							this.loadStatus = "loadmore"
						} else {
							console.log(this.loadStatus)
							this.loadStatus = "nomore"
						}
					} else {
						this.loadStatus = "nomore"
						return this.$toast(res.msg);
					}
				}).catch((e) => {
					return this.$toast('接口请求错误');
				})
			},
			getMenuList() {
				MenuApi.getMenuList({
					'position': 1
				}).then((res) => {
					if (res.code == 1) {
						this.navbarList = res.data
					}
				}).catch((e) => {
					return this.$toast('接口请求错误');
				})
			},
			getBannerList() {
				BannerApi.getBannerList().then((res) => {
					if (res.code == 1) {
						this.bannerList = res.data
					}
				}).catch((e) => {
					return this.$toast('接口请求错误');
				})
			},
			chooseMap() {
				var that = this;
				var locationInfo = storage.get('location');
				uni.chooseLocation({
					latitude: locationInfo.lat,
					longitude: locationInfo.lng,
					success: res => {
						let location = {
							name: res.name,
							lat: res.latitude,
							lng: res.longitude
						};
						storage.set("location", location);
						this.location = res.name
						this.sortType = 1;
						this.resetData()

					}
				});
			},
			resetData() {
				this.page = 1;
				this.shopList = [];
				this.showJz = true;
				this.getMerchantList();
			},
			getLocationInfo(e) {
				SettingApi.getLocationInfo({
					'latitude': e.latitude,
					'longitude': e.longitude
				}).then((res) => {
					if (res.code == 1) {
						this.location = res.data.addresses
						storage.set("location", res.data);
						this.sortType = 1;
					}
				}).catch((e) => {
					console.log(e);
					return this.$toast('接口请求错误3');
				})
			},
			changeSort(item) {
				this.sortType = item.type;
				this.resetData()
			},
			clickBanner(e) {
				utils.goUrl(this.bannerList[e], this)
				console.log(e)
			},
			goUrl(e) {
				if (e.url_type == 5) {
					this.$refs.communityModal.show(e)
				} else {
					utils.goUrl(e, this)
				}
			},

			changeType(e) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.ml10 {
		margin-left: 10rpx;
	}

	.main {
		height: 100vh;

		.main-head {
			position: relative;
			padding: 350rpx 20rpx 20rpx 20rpx;
			// padding: 0 20rpx 20rpx 20rpx;
			background-color: #ffffff;
			.title-box {
				width: 100%;
				height: 100rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.title-txt {
					font-size: 36rpx;
					font-weight: 700;
				}

				.share {
					width: 150rpx;
					height: 100%;
				}
			}

			.location {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 10rpx 0;

				.location-name {
					padding: 0 12rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: #686868;
				}
			}

			.search-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 80rpx;
				padding-bottom: 10rpx;
				.kefu-box {
					display: flex;
					flex-direction: column;
					width: 60rpx;
					height: 100%;
					margin-left: 10rpx;
					align-items: center;
					justify-content: center;

					.kefu-img {
						height: 40rpx;
						width: 100%;
					}

					.kefu-title {
						font-size: 20rpx;
					}
				}
			}

			.muen-box {
				padding-bottom: 10rpx;

				/deep/.navslider-box {
					margin: auto;
					background-color: #FFFFFF;
					border-radius: 12rpx;

					.swiper-type {
						width: 100%;

						.rowSta {
							display: flex;
							align-items: flex-start;
						}

						.slider_itemslist {
							width: 100%;
							flex-wrap: wrap;
							padding: 20rpx 0;

							.colCen {
								display: flex;
								flex-direction: column;
								align-items: center;
							}

							.item {
								width: 20%;
								margin-bottom: 30rpx;

								image {
									width: 100rpx;
									height: 100rpx;
									margin-bottom: 10rpx;
								}

								.desc {
									font-size: 28rpx;
									font-weight: 400;
									color: #333333;
								}
							}
						}
					}
				}
			}
			
			.fixedTop {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				background-color: #ffffff;
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		.list-box {
			padding: 20rpx;

			.type-box {
				margin: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.type-item {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.item-t {
						margin-right: 20rpx;
						padding: 10rpx 20rpx;
						background-color: #ffffff;
						border-radius: 8rpx;
						color: #7D6666;
						font-size: 26rpx;
					}

					.itemCkeck {
						background-color: #F65A45 !important;
						color: #FFFFFF !important;
					}
				}

				.switch-box {
					display: flex;
					flex-direction: column;
					align-items: center;

					.switch-title {
						margin-top: 10rpx;
						font-size: 20rpx;
						color: #BFA599;
					}
				}
			}

			.shop-box {
				.shop-item {
					background-color: #FFFFFF;
					border-radius: 16rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;

					.shop-info {
						display: flex;
						flex-direction: row;
						width: 100%;
						justify-content: space-between;
						margin-bottom: 30rpx;

						.shop-img {
							height: 180rpx;
							width: 180rpx;
							border-radius: 16rpx;
						}

						.info-box {
							width: 70%;
							padding-left: 10rpx;
							display: flex;
							flex-direction: column;

							.shop-name {
								font-weight: 700;
								font-size: 30rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}

							.shop-center {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.shop-platform {
									display: flex;
									flex-direction: row;
									align-items: center;

									.platform-img {
										width: 30rpx;
										height: 30rpx;
									}

									.platform-title {
										margin-left: 5rpx;
										font-size: 24rpx;
										color: #666666;
									}
								}

								.juli {
									font-size: 24rpx;
									color: #999999;
								}

							}

							.buy-now {
								margin-top: 20rpx;
								display: flex;
								justify-content: space-between;

								.activity-tip {
									font-size: 24rpx;
									color: #333333;
								}


							}
						}
					}

					.activity-box {
						.activity-item {
							margin-bottom: 20rpx;

							.item-line {
								display: flex;
								align-items: center;

								.item-line-title {
									width: 120rpx;
									padding: 5rpx 8rpx;
									height: 28rpx;
									background-color: #EEEEEE;
									border-radius: 4rpx 0rpx 4rpx 0rpx;
									font-size: 20rpx;
									color: #666666;
									line-height: 28rpx;
									text-align: center;
								}

								.line-box {
									background-color: #EEEEEE;
									height: 2rpx;
									width: 100%;
								}
							}

							.item-content {
								display: flex;
								align-items: center;
								height: 60rpx;
								justify-content: space-between;

								.content-left {
									display: flex;
									align-items: center;

									.shijian {
										width: 25rpx;
										height: 25rpx;
									}

									.activity-time {
										font-size: 20rpx;
										color: #666666;
										margin-left: 10rpx;
										margin-right: 10rpx;
									}
								}

								.content-right {
									display: flex;
									align-items: center;

									.kucun {
										// margin-right: 20rpx;
										margin-right: 10rpx;
										display: flex;
										flex-direction: column;

										.kucun-title {
											// font-size: 22rpx;
											font-size: 24rpx;
											color: #999999;
											margin-bottom: 5rpx;
										}
									}
								}

							}
						}
					}
				}
			}

		}

		.buy-btn {
			width: 120rpx;
			height: 58rpx;
			background: #F65A45;
			border-radius: 29rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 58rpx;
			font-size: 26rpx;
		}

		.actttxt {
			font-weight: 500;
			font-size: 20rpx;
			color: #666666;
			margin-left: 10rpx;
		}

		.manjian {
			padding: 0 8rpx;
			height: 38rpx;
			background: #FC564B;
			border-radius: 4rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.dapaizx {
			// padding: 0 8rpx;
			height: 38rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #FE7C0C;
			background: #FDFBF8;
			border-radius: 4rpx;
			border: 1rpx solid #FE7C0C;
		}

		.wuxupj {
			// padding: 0 8rpx;
			height: 38rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #26AE5B;
			background: #EBFAF1;
			border-radius: 4rpx;
			border: 1rpx solid #25AE5B;
		}

		.orgbtn {
			width: 120rpx;
			height: 58rpx;
			background: #FE7C0C;
			border-radius: 29rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.greybtn {
			color: #999999;
			background: #F0F0F0;
		}

		.game {
			position: fixed;
			right: 20rpx;
			top: 1000rpx;
			z-index: 99;

			image {
				width: 100rpx;
				height: 128rpx;
			}
		}

	}
</style>